(function()
{
      var textFieldData = new Object();
            
      function textFieldDialog( editor ){
        return {
          title : 'Properties Radio Button',
          resizable : CKEDITOR.DIALOG_RESIZE_BOTH,
          minWidth : 400,
          minHeight : 400,
          onShow : function(){
            delete this.textField;

      			var element = this.getParentEditor().getSelection().getSelectedElement();
      			if ( element && element.getName() == "div" && element.getAttribute( 'type' ) == "textField" )
      			{
      				this.textField = element;
      				this.setupContent( element );
      			}  
          },
          onOk : function(){
            var editor,
      				element = this.textField,
      				isInsertMode = !element;
      
            this.commitContent( { element : element } );
      
      			if ( isInsertMode )
      			{
      				editor = this.getParentEditor();
      				element = editor.document.createElement( 'div' );
              inputElement = editor.document.createElement( 'textarea' );
              element.setAttribute('type', 'textField' );
      				element.setAttribute('class', 'textField' );
      				element.setAttribute('style', 'width: '+textFieldData.width+'; height: '+textFieldData.height+'; margin: 0px; padding: 0px; border: 1px solid black; overflow: hidden; cursor: pointer;');
      				
      				inputElement.setAttribute('style', 'width: '+textFieldData.width+'; height: '+textFieldData.height+'; border: 0px solid black;');
      				inputElement.setAttribute('name', textFieldData.name);
      				
      				element.append(inputElement, true);
      			}
      
      			if ( isInsertMode )
      				editor.insertElement( element );
          },
          contents : [
            {
              id : 'tab1',
              label : 'Tab1',
              title : 'Properties Radio Button',
              elements : [
                {
                  type : 'text',
                  label : 'Name<br />',
                  id : 'nameTextField',
                  'default' : '',
                  setup : function( element )
      						{
                    this.setValue(element.getFirst().getAttribute('name') || ''); 
      						},
      						commit : function( data )
      						{ 
      							textFieldData.name = this.getValue();
      						}
                },{
                  type : 'text',
                  label : 'Width<br />',
                  id : 'widthTextField',
                  'default' : '300px',
      						setup : function( element )
      						{
      						  this.setValue(element.$.style.width || '');	
      						},
      						commit : function( data )
      						{
      						  textFieldData.width = this.getValue();	
      						}
                },{
                  type : 'text',
                  label : 'Height<br />',
                  id : 'heightTextField',
                  'default' : '200px',
      						setup : function( element )
      						{
      						  this.setValue(element.$.style.height || '');	
      						},
      						commit : function( data )
      						{
      						  textFieldData.height = this.getValue();	
      						}
                }
              ]
            }
          ]
        };
      }
      
    	CKEDITOR.dialog.add( 'simulatedTextField', function( editor )
  		{
  			return textFieldDialog( editor);
  		} );
})();